<template>
  <div :class="className" class="component-wrapper" >
     <!-- style -->
    <div v-html="css"></div>
    <div class="content">
      <div class="title">{{datas.title_text}}</div>
      <div v-show="!look_result" @click.stop="getPluVal">
        <div class="btn">{{datas.btn_text}}</div>
      </div>
      <div class="quota" v-show="look_result" ><em v-show="datas.price_symbol">￥</em>{{calcNum}}</div>
    </div>
  </div>
</template>

<script>

// 自定义样式
const css = function () {
  if (this.datas.preview_color) {
    const { preview_color,margin_top,margin_bottom,margin_left,margin_right,border_radius,quota_color,title_color,btn_text_color,btn_color } = this.datas;
    return `
        .component-${this.id} .content{
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
          background-size: 100% auto;
          background-position: top;
          border-radius: ${border_radius}px;
          margin: ${margin_top}px ${margin_right}px ${margin_bottom}px ${margin_left}px;
        }
        .component-${this.id} .content .title{
          color:${title_color};
          font-size: 15px;
          margin-bottom: 12px;
        }
        .component-${this.id} .content .btn {
          color:${btn_text_color};
          background-color:${btn_color};
          line-height: 36px;
          border-radius: 24px 24px 24px 24px;
        }
        .component-${this.id} .content .quota {
          color:${quota_color};
        }

    `;
  }

};


export default {
  props: ["id", "styles", "datas"],
  data() {
    return {
      calcNum: 0,
      look_result: false
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  methods: {
    async getPluVal() {
      let { result, msg, data } = await $http.get(
        "member.member.getAssetsData",
        {
          asset_type: this.datas.plu_set
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.calcNum = (Number(data.value) / this.datas.calcVal).toFixed(2);
      this.look_result = true;
    },
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

.content {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 14px;
}
.btn {
  display: inline-block;
  min-width: 122px;
  padding: 0 20px;
}
.quota {
  font-size: 30px;
  line-height: 30px;
  font-weight: bold;
  em {
    font-size: 18px;
  }
}
</style>
